Skip to content

Latest commit

 

History

History
72 lines (66 loc) · 4.78 KB

15.Susy2 語法速記表.markdown

File metadata and controls

72 lines (66 loc) · 4.78 KB
Raw

15.Susy2 語法速記表

$susy預設版型設定

  • 第一個參數為預設值，頓號後面則是其他選擇
  • 除了數值外，其他像是ltr、float的選項都可當作為keyword(關鍵字)
$susy: (
  flow: ltr、rtl,
  math: fluid、static,
  output: float、isolate,
  gutter-position: after,
  container: auto,
  container-position: center、left、right,
  columns: 4,
  gutters: .25,
  column-width: false 自訂,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

Shorthand (簡寫)

要先看得懂簡寫格式，
才知道其他Susy功能如何延伸應用，
下面排版、推擠的Susy2語法提供的格式，
絕大部分都會用到簡寫的方式代入設定：

名稱 格式 範例
$grid [columns] [gutter] [column-width] $grid: 12
$grid: 12 1/3
$grid: 12 (60px 10px)
$grid: (1 2 3 2 1) .25
$span [span] at [location] of [layout]
[欄數] at [位置] of [版型設定]		 $span: 8
$span:8 of 12
$span: 3 at 4 of 12 .25 fluid
$span: 30%;
$layout [grid] [keywords] $layout:8
$layout:4 (4em 1em) fluid inside-static rtl

排版

名稱 功能 格式 範例
Container 載入整體寬度 container($layout) @include container;
width: container();
Layout 載入新的排版設定 layout($layout) @include layout(12 1/4 inside-static);
with-layout 在特定元素載入單一排版設定 with-layout($layout, $clean) { @content } @include with-layout(8 static) {..};
Span 產生欄數寬度 span($span) { @content } @include span(25%);
@include span(3);
@include span(last 3);
其他..
Gutters 產生gutter寬度 gutter($span) margin-left: gutter();
margin-left: gutter(10);
@include gutters;
@include gutters(3em);
Susy-breakpoint 設定RWD斷點 susy-breakpoint($query, $layout, $no-query) @include susy-breakpoint(30em, 8) {..}
isolate 輸出isolate排版 isolate($isolate) margin-left: isolate(2 of 7 .5 after);，
@include isolate(25%);
Gallery 設定圖片Gird排版 gallery($span, $selector) @include gallery(3 of 12);

##推擠

名稱 功能 格式 範例
Pre margin-left:$span pre($span) @include pre(25%);
Post margin-right:$span post($span) @include post(25%);
@include post(2 of 7);
Pull margin-left:-$span(負值) pull($span) @include pull(25%);
Squish margin-left:$span;
margin-right:$span		 squish($pre [, $post]) @include squish(25%);
@include squish(1, 3);
Prefix padding-left:$span prefix($span) @include prefix(25%);
@include prefix(2 of 7);
Suffix padding-right:$span suffix($span) @include suffix(25%);
@include suffix(2 of 7);
Pad padding-left:$span;
padding-right:$span		 pad($prefix [, $suffix]) @include pad(25%);
@include pad(1, 3);
Bleed 上下左右都出血 bleed($bleed) @include bleed(1em);
@include bleed(1em 2 20px 5% of 8 .25);
Bleed-x 左右出血 bleed-x($bleed) @include bleed-x(1em 2em);
Bleed-y 上下出血 bleed-y($bleed) @include bleed-y(1em 2em);